<template>
  <div class="OrderShipList">
    <!-- 发货单 -->
    <!-- <div style="margin-top: 15px;width:400px"> -->
    <el-form :inline="true" :model="form">
      <el-form-item>
        <el-input
          placeholder="请输入内容"
          v-model="form.keywords"
          class="input-with-select"
        >
          <el-select v-model="form.select" slot="prepend" placeholder="请选择">
            <el-option label="学员名称" value="1"></el-option>
            <el-option label="手机号码" value="2"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="onSearch">搜索</el-button>
        <el-button icon="el-icon-refresh-left" @click="cz">重置</el-button>
      </el-form-item>
    </el-form>
    <p>
      <el-button type="primary">批量导出</el-button>
    </p>
    <!-- </div> -->
    <el-table :data="list" style="width: 100%" border stripe>
      <el-table-column prop="nickname" label="学员名称"> </el-table-column>
      <el-table-column prop="mobile" label="手机号码"> </el-table-column>
      <el-table-column prop="course_num" label="学习课程"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link type="primary" @click="onShow(scope.row)">学习记录</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- <table border="1px" width="100%" cellspacing="0" bordercolor="#cccccc">
      <tr>
        <th>学员名称</th>
        <th>手机号码</th>
        <th>学习课程</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.nickname }}</td>
        <td>{{ item.mobile }}</td>
        <td>{{ item.course_num }}</td>
        <td>
          <el-link type="primary">学习记录</el-link>
        </td>
      </tr>
    </table> -->

    <!-- 分页 -->
    <p style="text-align:right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </p>
    <!-- Form -->
    <!-- <el-button type="text" @click="isShow">打开嵌套表单的 Dialog</el-button> -->

    <el-dialog title="学习记录" :visible.sync="show">
      <p>
        <el-button type="primary">批量导出</el-button>
      </p>
      <el-table style="width: 100%" border stripe>
        <el-table-column label="课程名称"> </el-table-column>
        <el-table-column label="课程类型"> </el-table-column>
        <el-table-column label="课时数量"> </el-table-column>
        <el-table-column label="学习进度"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <p style="text-align:right">
        <el-pagination
          :current-page="1"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="0"
        >
        </el-pagination>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStatistical } from "../../api/api6";
export default {
  data() {
    return {
      show: false,
      form: {
        keywords: "",
        select: ""
      },
      query: {
        keywords: "",
        keywords_type: "nickname",
        limit: 10,
        page: 1
      },
      // 总条数
      total: 0,
      // 数据
      list: [],
      listcopy: [],
      it: ""
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onShow(item) {
      this.show = true;
      this.it = item;
    },
    getList() {
      getStatistical(this.query.page, this.query.limit)
        .then(res => {
          console.log(res);
          this.total = res.data.total;
          this.list = res.data.list;
          this.listcopy = res.data.list;
        })
        .finally(() => {});
    },
    // 每页多少条
    handleSizeChange(val) {
      this.query.limit = val;
    },
    // 页码
    handleCurrentChange(val) {
      // console.log(val);
      this.query.page = val;
    },
    // 搜索
    onSearch() {
      this.list = this.listcopy.filter(item => {
        if (this.form.select == 1) {
          return item.nickname.includes(this.form.keywords);
        }
        if (this.form.select == 2) {
          return item.mobile.includes(this.form.keywords);
        }
      });
      this.form.keywords = "";
    },
    // 重置
    cz() {
      this.list = this.listcopy;
    }
  },

  watch: {
    query: {
      deep: true,
      handler: function() {
        this.getList();
      }
    }
  }
};
</script>

<style lang="scss">
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.OrderShipList {
  table {
    tr {
      text-align: center;
      height: 40px;
    }
    tr:hover {
      background-color: #ebf7ff;
    }
  }
}
</style>
